<!-- 编辑信息 组件 -->
<template>
  <el-form :model="diaForm" ref="DiaFormRef" :rules="rules" status-icon label-width="110px" status>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="所属项目" prop="projectName">
            <el-input v-model="diaForm.projectName" filterable disabled placeholder="请选择" style="width: 250px;">
              <template #append>
                <el-button type="primary" @click="open">选择</el-button>
              </template>
            </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专利状态" prop="patentStatusId">
            <el-select
            v-model="diaForm.patentStatusId"
            placeholder="请选择"
            style="width: 100%"
            @change="changePatentStatus">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.patentStatusList"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="业务板块" prop="techClassId">
            <el-select
            v-model="diaForm.techClassId"
            placeholder="请选择"
            style="width: 250px"
            @change="changeTechClass">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.techClassList"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专利来源" prop="patentResourceId">
            <el-select
            v-model="diaForm.patentResourceId"
            placeholder="请选择"
            style="width: 100%"
            @change="changePatentResource">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.patentResourceList"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="维护单位" prop="maintainUnitId">
          <popup-tree-input :data="data.maintainUnitList" :props="data.popupTreeProps" :prop="deptForm.parentName == null
                                                ? $t('message.org.top_menu')
                                                : diaForm.maintainUnit
                                                " :node-key="'' + deptForm.parentId"
                                                :current-change-handle="changeMaintainUnit" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="国家" prop="countryId">
            <el-select
            v-model="diaForm.countryId" @change="changePatentcountry"
            placeholder="请选择国家"
            style="width: 100%"
           >
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.countryList"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="专利类别" prop="patentTypeId">
            <el-select
            v-model="diaForm.patentTypeId" @change="patentTypeIdChange"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.patentTypeIdList"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">

        <el-form-item label="级别与等级" prop="levelId">
            <el-select
            v-model="diaForm.levelId" @change="levelChange"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.levelList"
            />
<!--        <el-form-item label="级别与等级" prop="level">-->
<!--          <el-select
            v-model="diaForm.level" @change="levelChange"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in data.levelList"
            />-->
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">

        <el-form-item label="可用做高新申请" prop="isHightPay">
            <el-select
            v-model="diaForm.isHightPay"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.text"
              :value="item.value"
              :key="item.value"
              v-for="item in options.isHightPayList"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">

        <el-form-item label="进行专利密集型产品备案" prop="isIntensiveProducts">
            <el-select
            v-model="diaForm.isIntensiveProducts"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.text"
              :value="item.value"
              :key="item.value"
              v-for="item in options.isHightPayList"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">

        <el-form-item label="合同中规定的成果" prop="isContractSuccess">
            <el-select
            v-model="diaForm.isContractSuccess"
            placeholder="请选择"
            style="width: 100%">
            <el-option
              :label="item.text"
              :value="item.value"
              :key="item.value"
              v-for="item in options.isHightPayList"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="处理结果" prop="dealResult">
        <el-input  placeholder="请输入" v-model="diaForm.dealResult" style="width: 100%" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" maxlength="200" show-word-limit />
    </el-form-item>
    <el-form-item label="证书存放地" prop="saveAddress">
        <el-input placeholder="请输入" v-model="diaForm.saveAddress" style="width: 100%" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" maxlength="200" show-word-limit />
    </el-form-item>
    <el-form-item label="技术重要性" prop="techImportance">
        <el-input placeholder="请输入" v-model="diaForm.techImportance" style="width: 100%" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" maxlength="200" show-word-limit />
    </el-form-item>
    <el-form-item label="专利纠纷及调节情况" prop="disputeAdjust">
        <el-input placeholder="请输入" v-model="diaForm.disputeAdjust" style="width: 100%" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" maxlength="200" show-word-limit />
    </el-form-item>
  </el-form>
  <!-- 项目弹窗 -->
  <el-dialog v-model="dialogVisible" width="900px" top="17vh" :show-close="false" :close-on-click-modal="false">
      <template #title>
<!--        <div class="my-header">-->
          <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="项目选择" name="first">
              <div class="search-box" style="margin-bottom: 10px;">
                <el-input v-model="xiangmuParams.projectName" placeholder="请输入" class="input-with-select"
                  style="width: 300px">
                  <template #append>
                    <el-button type="primary" @click="open">搜索</el-button>
                  </template>
                </el-input>
              </div>
              <el-table height="450px" :data="options.xiangmuList" style="width: 100%" border @selection-change="handleSelectionChange1">
                <el-table-column fixed type="selection" width="40" />
                <el-table-column prop="projectName" label="项目名称" />
                <el-table-column prop="projectNumber" label="项目编号" />
                <el-table-column prop="departmentName" label="关联部门" />
                <el-table-column prop="projectLeaderName" label="项目负责人" />
                <el-table-column prop="projectYear" label="立项年份" />

              </el-table>
            </el-tab-pane>
          </el-tabs>
        <div class="example-pagination-block">
          <el-pagination background layout="prev, pager, next ,total,sizes,jumper" total="totalNum"
                         @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>

          <div class="handle" >
            <el-button color="#626aef" @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="toHandle1">关联</el-button>
          </div>
<!--        </div>-->
      </template>
    </el-dialog>
</template>

<script>
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import { getDictionary } from "@/views/science/api/academic";
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
import SelectOption from "@/views/science/components/selectOption/index.vue";
import Table from "@/views/science/components/table/table.vue";
import { tips } from "@/views/science/components/tips/tips";
import { onMounted, reactive, ref, watch } from "vue";
import { projectManagementListPage } from '../../technologyStrength/api/technologyStrength';
import InfoDialog from "./InfoDialog.vue";
import {ElTable} from "element-plus";
export default {
  components: {
    SelectOption,
    Table,
    InfoDialog,
    PopupTreeInput,
    ElTable,
  },
  props:{
    editInformationData:Object,
  },
  emits:{
    changeEditInformation:null,
    valueFlag2:null,
  },
  setup(props, { emit }) {
    //表格用到的参数
    const state = reactive({
      ...props.pagination,
    })
    const deptForm = {
            parentId: 0,
            parentName: '',
        }

    let data = reactive({
      popupTreeProps: {
                label: 'name',
                children: 'children',
            },
      id: '',
    //   unitNameList: [], //维护单位
      workList: [], //软著状态
      yearList: [],//专利类型
      patentStatusList:[],//专利状态
      tableDate: [],
      activeName: ref('first'),
      techClassList:[],//技术分类
      patentResourceList:[],//专利来源
      maintainUnitList:[],//维护单位
      patentTypeIdList:[],//专利类别
      levelList:[],//级别与等级
      countryList:[],//国家

    });
    let diaForm = reactive({

    })
    let options = reactive({
        hetongList:[],//项目列表
        isHightPayList:[
            {text:'否',value:'1',},
            {text:'是',value:'0',},
        ],
    })
    watch(diaForm, (newValue, oldValue) => {

      emit("changeEditInformation", diaForm);
    });
    watch(() => props.editInformationData,(newValue, oldValue) => {
                // console.log('Object.keys(obj).length == 0',Object.keys(newValue).length == 0);
                  Object.assign(diaForm,newValue)
              }, { deep: true, immediate: true }
    );
    //-----------------------选择项目关联 打开项目列表----------
    let xiangmuParams = reactive({
      projectName: '',
      projectNumber: '',
      createOrgId: '',
      level: '',
      current: 1,
      size: 20,
      projectCategory: '1',
    })

    const rules = reactive({
      projectName: [
        { required: true, message: '请输入所属项目', trigger: 'change', },
      ],
      patentStatusId: [
        { required: true, message: '请输入专利状态', trigger: 'change', },
      ],
      techClassId: [
        { required: true, message: '请输入技术分类', trigger: 'change', },
      ],
      patentResourceId: [
        { required: true, message: '请输入专利来源', trigger: ['change','blur'] },
      ],
      maintainUnitId: [
        { required: true, message: '请输入维护单位', trigger: 'change', },
      ],
      isHightPay: [
        { required: true, message: '请输入可用做高新申请', trigger: 'change', },
      ],
      isIntensiveProducts: [
        { required: true, message: '请输入进行专利密集型产品备案', trigger: 'change', },
      ],
      isContractSuccess: [
        { required: true, message: '请输入合同中规定的成果', trigger: 'change', },
      ],
      patentTypeId: [
        { required: true, message: '请输入专利类别', trigger: ['change','blur'] },
      ],
      levelId: [
        { required: true, message: '请输入级别与等级', trigger: 'change', },
      ],
/*      level: [
        { required: true, message: '请输入级别与等级', trigger: 'change', },
      ],*/
      countryId: [
        { required: true, message: '请输入国家', trigger: 'change', },
      ],
      saveAddress: [
        { required: true, message: '请输入证书存放地', trigger: 'change', },
      ],
    })

    const DiaFormRef = ref()
    const submitForm = async () => {
      DiaFormRef.value.validate(valid =>{
          console.log('valid1',valid);
            if (valid){
                emit('valueFlag2', true)
            }else{
                emit('valueFlag2', false)
            }
        })
    }
    //清空form
    const clearForm = () =>{
      DiaFormRef.value.resetFields()
      diaForm.maintainUnit = ''
      diaForm.isContractSuccess = ''
      diaForm.isIntensiveProducts = ''
      diaForm.countryId = ''
    }

    let dialogVisible = ref(false)
    let open = async () => {
      const res = await projectManagementListPage(xiangmuParams)
      options.xiangmuList = res.data.data.records
      dialogVisible.value = true
    }
    let select1 = ref([]) //项目
    let handleSelectionChange1 = (val) => {
      select1.value = val
    }
    const toHandle1 = () => {
      if (select1.value.length != 1) {
        tips('请选择一项关联', 'warning')
        return
      } else {
        let obj = select1.value[0]
        diaForm.projectId = obj.id
        diaForm.projectName = obj.projectName
        dialogVisible.value = false
      }
    }
    //------------------↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑----------

    //字典
    let getCodeList = () => {
      getDictionary(["KJSL_PATENT_STATUS",'KJSL_BUSINESS_SECTOR','KJSL_PATENT_RESOURCE','KJSL_ZL_LEVEL','ZJYRC_SZGL']).then((res) => {
        data.patentStatusList = res.data.data.KJSL_PATENT_STATUS;
        data.techClassList = res.data.data.KJSL_BUSINESS_SECTOR;
        data.patentResourceList = res.data.data.KJSL_PATENT_RESOURCE;
        data.patentTypeIdList = res.data.data.KJSL_ZL_LEVEL;
        // data.levelList = res.data.data.KJSL_ZL_LEVEL;
        data.countryList = res.data.data.ZJYRC_SZGL;

        console.log('字典',res);
      });
    };
    //专利状态
    let changePatentStatus = (id) =>{
        let itemText = data.patentStatusList.find(item => item.itemValue == id).itemText
        diaForm.patentStatus = itemText
    }
    //技术分类
    let changeTechClass = (id) =>{
        let itemText = data.techClassList.find(item => item.itemValue == id).itemText
        diaForm.techClass = itemText
    }
    //专利状态
    let changePatentResource= (id) =>{
        let itemText = data.patentResourceList.find(item => item.itemValue == id).itemText
        diaForm.patentResource = itemText
    }
    //专利类别
    let patentTypeIdChange = (id) =>{
      let itemText = data.patentTypeIdList.find(item => item.itemValue == id).itemText
        diaForm.patentType = itemText
        data.levelList = data.patentTypeIdList.find(item => item.itemValue == id).children
    }
    //等级
    let levelChange = (id) =>{
      let itemText = data.levelList.find(item => item.itemValue == id).itemText
      diaForm.level = itemText
      // let itemText = data.levelList.find(item => item.itemText == id).itemValue
      // diaForm.levelId = itemText
      // alert(diaForm.levelId)
    }
    //国家
    let changePatentcountry = (id) =>{
      let itemText = data.countryList.find(item => item.itemValue == id).itemText
      diaForm.countryName = itemText
    }
    // 单位
    let getUnitList = () => {

      return request({
                url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
                method: "get",
            }).then(res => {
                data.maintainUnitList = res.data.data
            })
    };
    let changeMaintainUnit = (item) =>{
        diaForm.maintainUnit = item.name
        diaForm.maintainUnitId = item.id
    }
    //改变页码
    const handleCurrentChange = (e) => {
      // console.log(e)
      state.page = e
      emit('currentChange', e)
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e)
      state.limit = e
    }
    onMounted(() => {
         getCodeList()
         getUnitList()
         // patentTypeIdChange(diaForm.patentTypeId)
         // levelChange(diaForm.levelId)
     });
    return{
        data,
        diaForm,
        rules,
        open,
        xiangmuParams,
        options,
        handleSelectionChange1,
        dialogVisible,
        toHandle1,
        changePatentStatus,
        changeTechClass,
        changePatentResource,
        changeMaintainUnit,
        patentTypeIdChange,
        levelChange,
        submitForm,
        clearForm,
        DiaFormRef,
        deptForm,
      handleCurrentChange,
      handleSizeChange,
      changePatentcountry,

    }
  }
}
</script>

<style lang="scss" scoped>
.handle{
    margin: 10px 0;
    text-align: right;
}
.example-pagination-block {
  margin-top: 15px;
  text-align: center;
}
:deep(.el-pagination .btn-next .el-icon) {
  margin: 0 auto;
}

:deep(.el-pagination .btn-prev .el-icon) {
  margin: 0 auto;
}

:deep(.demo-tabs > .el-tabs__content) {
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.el-select{
  margin: 0 !important;
}
</style>
